<template>
<div class="whole">
   <!-- <BHeader></BHeader>
  <SearchBar></SearchBar>
  <div class="content">
  <Categories style="margin-top:30px"></Categories>
 
  <BookL></BookL>
  </div>
  <Bfooter class="footer"></Bfooter> -->
  <el-container>
  <el-header>
    <BHeader></BHeader>
  </el-header>
  <el-container>
    <el-aside>
      <Categories style="margin-top:70%"></Categories>
      </el-aside>
    <el-main> 
      <SearchBar></SearchBar>
      <BookL></BookL>
    </el-main>
  </el-container>
  <Bfooter class="footer"></Bfooter>
</el-container>
</div>
</template>

<script>
import BHeader from '../../components/BHeader.vue'
import SearchBar from '../../components/SearchBar.vue'
import Bfooter from '../../components/BFooter.vue'
import Categories from '../../components/LeftCategories.vue'
import BookL from '../../components/BookListPage.vue'
export default {
  name: 'Home',
  components: {
    BHeader,
    SearchBar,
    Bfooter,
    Categories,
     BookL
  }
}
</script>


<style  scoped>
.el-header{
  padding: 0;
}
.whole
{
    background-color: transparent;
     /* background-image: url("../../assets/zhbg.jpg"); */
     
}
.footer
{
 margin-top: 50px;
}
.content
{
  display:flex;
}
</style>
